<template>
  <div class="reader-page">
    <!-- 顶部导航 -->
    <div class="reader-header" :class="{ 'hidden': isFullscreen }">
      <div class="container">
        <div class="reader-nav">
          <router-link to="/" class="nav-item">
            <i class="el-icon-s-home"></i> 首页
          </router-link>
          <span class="separator">/</span>
          <router-link :to="`/page/${bookId}`" class="nav-item">
            {{ bookTitle }}
          </router-link>
          <span class="separator">/</span>
          <span class="nav-item current">{{ chapterTitle }}</span>
        </div>
      </div>
    </div>

    <!-- 阅读区域 -->
    <div class="reader-content" :class="{ 'fullscreen': isFullscreen }">
      <div class="container">
        <div class="chapter-container" :class="{ 'night-mode': isNightMode }">
          <h1 class="chapter-title">{{ chapterTitle }}</h1>
          <div class="chapter-meta">
            <span class="book-title">{{ bookTitle }}</span>
            <span class="author">{{ bookAuthor }}</span>
          </div>
          <div class="chapter-text" ref="chapterText">
            <p v-for="(paragraph, index) in chapterContent" :key="index">
              {{ paragraph }}
            </p>
          </div>
        </div>

        <!-- 翻页控制 -->
        <div class="chapter-navigation">
          <el-button type="primary" plain :disabled="!hasPrevChapter" @click="gotoPrevChapter">
            上一章
          </el-button>
          <el-button @click="showChapterList = true">目录</el-button>
          <el-button type="primary" plain :disabled="!hasNextChapter" @click="gotoNextChapter">
            下一章
          </el-button>
        </div>
      </div>
    </div>

    <!-- 底部控制栏 -->
    <div class="reader-controls" :class="{ 'hidden': isFullscreen }">
      <div class="container">
        <div class="control-left">
          <el-button size="small" icon="el-icon-arrow-left" circle :disabled="!hasPrevChapter" @click="gotoPrevChapter"></el-button>
          <el-button size="small" icon="el-icon-arrow-right" circle :disabled="!hasNextChapter" @click="gotoNextChapter"></el-button>
        </div>
        <div class="control-center">
          <el-button-group>
            <el-button size="small" icon="el-icon-minus" @click="decreaseFontSize"></el-button>
            <el-button size="small">{{ fontSize }}px</el-button>
            <el-button size="small" icon="el-icon-plus" @click="increaseFontSize"></el-button>
          </el-button-group>
        </div>
        <div class="control-right">
          <el-button size="small" icon="el-icon-moon" circle :type="isNightMode ? 'primary' : ''" @click="toggleNightMode"></el-button>
          <el-button size="small" icon="el-icon-full-screen" circle :type="isFullscreen ? 'primary' : ''" @click="toggleFullscreen"></el-button>
        </div>
      </div>
    </div>

    <!-- 章节目录抽屉 -->
    <el-drawer
      title="章节目录"
      :visible.sync="showChapterList"
      direction="rtl"
      size="300px"
    >
      <div class="chapter-list">
        <div 
          v-for="chapter in chapterList" 
          :key="chapter.id"
          class="chapter-list-item"
          :class="{ 'active': chapter.id === currentChapterId }"
          @click="gotoChapter(chapter.id)"
        >
          {{ chapter.title }}
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'BookReader',
  data() {
    return {
      bookId: null,
      bookTitle: '加载中...',
      bookAuthor: '加载中...',
      currentChapterId: null,
      chapterTitle: '加载中...',
      chapterContent: ['加载中...'],
      chapterList: [],
      hasPrevChapter: false,
      hasNextChapter: false,
      isNightMode: false,
      isFullscreen: false,
      fontSize: 18,
      showChapterList: false
    };
  },
  created() {
    this.bookId = this.$route.params.id;
    const chapterId = this.$route.query.chapter || null;
    
    this.fetchBookInfo(this.bookId);
    this.fetchChapterList(this.bookId);
    
    if (chapterId) {
      this.fetchChapterContent(this.bookId, chapterId);
    } else {
      // 默认加载第一章
      setTimeout(() => {
        if (this.chapterList.length > 0) {
          this.fetchChapterContent(this.bookId, this.chapterList[0].id);
        }
      }, 600);
    }
  },
  methods: {
    fetchBookInfo(bookId) {
      // 模拟API调用获取书籍信息
      setTimeout(() => {
        // 实际应用中这里会使用 bookId 调用后端 API
        this.bookTitle = bookId ? `沧元图 #${bookId}` : '沧元图';
        this.bookAuthor = '我吃西红柿';
      }, 300);
    },
    fetchChapterList(bookId) {
      // 模拟API调用获取章节列表
      setTimeout(() => {
        // 实际应用中这里会使用 bookId 调用后端 API
        this.chapterList = Array.from({ length: 12 }, (_, i) => ({
          id: `${bookId}_${i + 1}`,
          title: `第${i + 1}章 ${['命运的转折', '神秘力量', '初入修真', '修炼之路', '第一次历练', '奇遇', 
                 '古老的秘密', '强者云集', '危机四伏', '突破', '新的开始', '宗门大比'][i]}`
        }));
      }, 500);
    },
    fetchChapterContent(bookId, chapterId) {
      // 模拟API调用获取章节内容
      setTimeout(() => {
        this.currentChapterId = parseInt(chapterId);
        
        // 查找章节标题
        const chapter = this.chapterList.find(ch => ch.id === this.currentChapterId);
        if (chapter) {
          this.chapterTitle = chapter.title;
        }
        
        // 模拟章节内容
        this.chapterContent = [
          "    青山绿水间，一位少年静静地盘坐在溪边的巨石上，他目光清澈，神情专注。这里是青山村外的一处僻静之地，远离村子的喧嚣，只有潺潺的流水声与鸟鸣声相伴。",
          "    \"吴青，该回家了！天都快黑了。\"远处传来一位中年妇女焦急的呼唤声。",
          "    溪边的少年缓缓睁开眼睛，深吸一口气，轻轻吐出。\"知道了，娘，马上回去。\"",
          "    吴青，今年刚满十六岁，是青山村里出了名的奇才。从小聪明过人，但命运多舛。六岁那年，父亲为救落水的村民不幸遇难，从此他与母亲相依为命。",
          "    他站起身，拍了拍衣服上的尘土，最后看了一眼手中的古朴玉佩。这是父亲留给他唯一的遗物，上面刻着奇异的纹路，多年来，吴青一直将它视为珍宝。",
          "    \"爹，我不会让你失望的。\"他轻声自语道，然后转身朝村子的方向走去。",
          "    青山村是个普通的山村，村民们日出而作，日落而息，过着平静的生活。然而就在一周前，村子里来了一群自称是\"修真界\"来的修士，他们穿着奇异的服饰，言谈举止都与普通人不同。",
          "    据说，他们是来寻找什么\"灵脉\"的，还说青山村地下可能蕴藏着一条失落已久的上古灵脉。这个消息在村里引起了不小的轰动，许多年轻人心生向往，梦想着能够加入修真界，获得超凡的力量。",
          "    吴青原本对此并不在意，直到三天前的那个夜晚。",
          "    那晚，他做了一个奇怪的梦。梦中，他看到了父亲，父亲站在一个充满光芒的通道前，对他说：\"青儿，通往其他宇宙的通道即将开启，灾难与机遇并存，记住，只有心怀善念之人，才能在这场变革中立于不败之地。\"",
          "    醒来后，吴青发现手中的玉佩散发出淡淡的光芒，上面的纹路也变得更加清晰。更奇怪的是，从那天起，他感觉自己的感知变得异常敏锐，能够感受到周围的一丝丝能量流动。"
        ];
        
        // 设置上一章/下一章状态
        this.hasPrevChapter = this.currentChapterId > 1;
        this.hasNextChapter = this.currentChapterId < this.chapterList.length;
        
        // 更新URL，不触发路由变化
        this.$router.replace({ 
          path: `/reader/${this.bookId}`, 
          query: { chapter: this.currentChapterId } 
        }, () => {}, () => {});
        
        // 滚动到顶部
        window.scrollTo(0, 0);
      }, 600);
    },
    gotoPrevChapter() {
      if (this.hasPrevChapter) {
        this.fetchChapterContent(this.bookId, this.currentChapterId - 1);
      }
    },
    gotoNextChapter() {
      if (this.hasNextChapter) {
        this.fetchChapterContent(this.bookId, this.currentChapterId + 1);
      }
    },
    gotoChapter(chapterId) {
      this.showChapterList = false;
      if (chapterId !== this.currentChapterId) {
        this.fetchChapterContent(this.bookId, chapterId);
      }
    },
    toggleNightMode() {
      this.isNightMode = !this.isNightMode;
    },
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen;
      if (this.isFullscreen) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = '';
      }
    },
    increaseFontSize() {
      if (this.fontSize < 24) {
        this.fontSize += 1;
        this.updateFontSize();
      }
    },
    decreaseFontSize() {
      if (this.fontSize > 14) {
        this.fontSize -= 1;
        this.updateFontSize();
      }
    },
    updateFontSize() {
      if (this.$refs.chapterText) {
        this.$refs.chapterText.style.fontSize = `${this.fontSize}px`;
      }
    }
  },
  watch: {
    '$route'(to) {
      const chapterId = to.query.chapter;
      if (chapterId && parseInt(chapterId) !== this.currentChapterId) {
        this.fetchChapterContent(this.bookId, chapterId);
      }
    }
  }
}
</script>

<style scoped>
.reader-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

.reader-header {
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 0;
  transition: transform 0.3s ease;
}

.reader-header.hidden {
  transform: translateY(-100%);
}

.reader-nav {
  display: flex;
  align-items: center;
}

.nav-item {
  color: #606266;
  text-decoration: none;
}

.nav-item:hover {
  color: #409EFF;
}

.nav-item.current {
  color: #303133;
  font-weight: 500;
}

.separator {
  margin: 0 10px;
  color: #dcdfe6;
}

.reader-content {
  flex: 1;
  padding: 30px 0 80px;
  background-color: #f5f7fa;
  transition: all 0.3s ease;
}

.reader-content.fullscreen {
  padding-top: 0;
  padding-bottom: 0;
  background-color: #fff;
}

.chapter-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 30px;
}

.chapter-container.night-mode {
  background-color: #262626;
  color: #bbb;
}

.chapter-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 10px;
}

.chapter-meta {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  font-size: 14px;
  color: #909399;
}

.book-title {
  margin-right: 15px;
}

.chapter-text {
  line-height: 1.8;
  font-size: 18px;
}

.chapter-navigation {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 20px;
}

.reader-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
  padding: 10px 0;
  transition: transform 0.3s ease;
  z-index: 100;
}

.reader-controls.hidden {
  transform: translateY(100%);
}

.reader-controls .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chapter-list {
  padding: 0 15px;
}

.chapter-list-item {
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s;
}

.chapter-list-item:hover {
  color: #409EFF;
}

.chapter-list-item.active {
  color: #409EFF;
  font-weight: 500;
}
</style> 